<!-- 查询条件组插件 区域 -->
<template>
  <div>
    <el-select v-model="area" placeholder="区域编号" @change="areaChange(area)" clearable>
      <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
import { getArea } from "../api/area.js";
import { getDorm } from "../api/dorm.js";
export default {
  name: "area-c",
  props: ["area", "dorm"],
  data: function() {
    // return {
    //   area: "",
    //   dorm: "",
    //   areaList: []
    // };
    return { areaList: [] };
  },
  methods: {
    getArea() {
      getArea().then(res => {
        if (res) {
          this.areaList = res.msg;
        }
      });
    },
    areaChange(area) {
      // 搜索宿舍楼编号
      if (area === "") {
        return true;
      }
      getDorm(area).then(res => {
        if (res) {
          this.dorm = null;
          this.dorm = res.msg;
        } else {
          this.dorm = [
            {
              value: "",
              label: ""
            }
          ];
          this.dorm = "";
        }
      });
    }
  },
  mounted() {
    this.getArea();
  }
};
</script>
<style scoped>
</style>
